<template>
	<view class="content">

		<!-- 搜索部分 -->
		<view class="search_div" style="display: none;">
			<view class="search_border">
				<input class="et_word" maxlength="24" placeholder="请输入运单号" :value="word" @input="onInputWord" />
				<view style="color: #ccc;">|</view>
				<view style="padding: 24rpx 36rpx 24rpx 24rpx;" @click.stop="onSearch">搜索</view>
			</view>
		</view>

		<view class="tab_div">
			<view class="tab_item" @click.stop="onSelStatus('1')">
				<view :class="curr_tab == '1' ? 'tab_txt_sel' : 'tab_txt'">待接单</view>
			</view>
			<view class="tab_item" @click.stop="onSelStatus('2')">
				<view :class="curr_tab == '2' ? 'tab_txt_sel' : 'tab_txt'">已接单</view>
			</view>
			<view class="tab_item" @click.stop="onSelStatus('-1')">
				<view :class="curr_tab == '-1' ? 'tab_txt_sel' : 'tab_txt'">全部</view>
			</view>
		</view>

		<view class="main">

			<view v-for="(item,index) in data_list" class="item_data" @click.stop="onItemClick(JSON.stringify(item))">
				<!-- 左边:内容 -->
				<view class="item_left_div">
					<view style="font-weight: bold;font-size: 30rpx;">货物名称：配件 2吨 2方</view>
					<view style="font-size: 24rpx;color: #666;margin: 6rpx 0 0rpx 0;">接货地址：大山路工业一路</view>
					<view style="font-size: 24rpx;color: #666;margin: 6rpx 0 0rpx 0;">所在园区：顺和物流园</view>
					<view v-if="curr_tab == 1" style="font-size: 24rpx;color: #666;margin: 6rpx 0 0rpx 0;">派单时间：2025-09-01 16:03:40</view>
					<view v-if="curr_tab == 2" style="font-size: 24rpx;color: #666;margin: 6rpx 0 0rpx 0;">接单时间：2025-09-01 16:14:25</view>

					<!-- 操作按钮 -->
					<view class="op_btn_div">
						<view v-if="curr_tab == 1" class="op_btn_1" @click.stop="onBtn1">接单</view>
						<view v-if="curr_tab == 1" class="op_btn_2" @click.stop="onBtn2">拒单</view>
						<view v-if="curr_tab == 2" class="op_btn_3" @click.stop="onBtn3">送达</view>
					</view>

				</view>

			</view>

			<view v-if="!data_list || data_list.length <= 0" style="width: 100%;line-height: 40vh;text-align: center;">暂无数据~</view>

		</view>
	</view>
</template>

<script>
	import { getUInfo, isEmpty, timestampToYMDHM } from '@/util/util.js'
	export default {
		data() {
			return {
				data_list: [{}, {}, {}], // 数据列表
				word: '',
				curr_tab: '-1', // 记录当前选择的tab代表的状态
				curr_page: 1,
				limit: 20,
			}
		},

		onLoad(opts) {
			let type = opts.type
			if (type) {
				this.curr_tab = type
				if (type == 1) uni.setNavigationBarTitle({ title: '待接货订单' })
				if (type == 2) uni.setNavigationBarTitle({ title: '已接货订单' })
			}
			this.getDataList()
		},

		onPullDownRefresh() {
			this.data_list = []
			this.word = ''
			this.curr_page = 1
			this.getDataList()
		},

		onReachBottom() {
			this.curr_page++
			this.getDataList()
		},

		methods: {


			onBtn1() {
				uni.showModal({
					title: '提示',
					content: '确认接单？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({ icon: 'none', title: '接单,敬请期待' })
						}
					}
				})
			},
			onBtn2() {
				uni.showModal({
					title: '提示',
					content: '确认拒绝接单？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({ icon: 'none', title: '拒单,敬请期待' })
						}
					}
				})
			},
			onBtn3() {
				uni.showModal({
					title: '提示',
					content: '确认送达？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({ icon: 'none', title: '送达,敬请期待' })
						}
					}
				})
			},
			// -1 全部 
			onSelStatus(status) {
				this.curr_tab = status
			},
			// 监听:输入关键字
			onInputWord(e) {
				this.word = e.detail.value
			},
			// 点击搜索
			onSearch() {
				this.data_list = []
				this.curr_page = 1
				this.getDataList()
			},

			// 删除列表项
			onDel(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认删除？',
					success: (res) => {
						if (res.confirm) {
							that.delData(item)
						}
					}
				})
			},
			// 点击数据项
			onItemClick(item_str) {
				uni.setStorageSync('hd_detail', item_str)
				uni.navigateTo({ url: '/pages/ycsb/hd_detail' })
			},

			// 接口:获取数据列表
			async getDataList() {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '加载中..', mask: true, })
				let order_sn = this.word
				let res = await that.$getHdList({ token, order_sn, page: this.curr_page, limit: this.limit })
				// console.log('getHdList.res = ', res);
				if (res.code == 1) {
					if (!res.data.data || res.data.data.length <= 0) {
						uni.showToast({ icon: 'none', title: '暂无更多数据' })
						return
					}
					this.data_list = this.data_list.concat(res.data.data)
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},
			// 接口:删除数据
			async delData(item) {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '删除中..', mask: true, })
				let res = await that.$delReceipt({ token, id: item.id })
				if (res.code == 1) {
					uni.showToast({ title: res.msg, icon: 'none' })
					uni.startPullDownRefresh({})
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			timestampToYMDHM(ts) {
				return timestampToYMDHM(1000 * ts, '-', ':')
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 100vh;
		background-color: #f2f2f2;
	}

	.search_div {
		position: fixed;
		height: 88rpx;
		width: calc(100%);
		background-color: white;
		z-index: 1;
	}

	.search_border {
		display: flex;
		align-items: center;
		width: calc(100% - 24rpx);
		height: calc(100% - 24rpx);
		margin: 12rpx 12rpx 12rpx 12rpx;
		border: solid 1rpx #ccc;
		border-radius: 888rpx;
	}

	.et_word {
		flex-grow: 1;
		padding: 0 0 0 48rpx;
	}

	.tab_div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 88rpx;
		position: fixed;
		background-color: white;
		/* margin: 80rpx 0 0 0; */
	}

	.tab_item {
		flex-grow: 1;
		text-align: center;
		height: 100%;
		line-height: 88rpx;
	}

	.tab_txt {
		font-size: 29rpx;
		font-weight: normal;
		color: #222;
	}

	.tab_txt_sel {
		font-size: 29rpx;
		font-weight: bold;
		color: #1890FF;
	}

	.main {
		margin: 114rpx 24rpx 24rpx 24rpx;
		padding: 0rpx 24rpx 24rpx 24rpx;
		background: white;
		border-radius: 24rpx;
	}

	.item_data {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin: 12rpx 0 12rpx 0;
		padding: 24rpx 0 12rpx 0;
		border-bottom: solid 1rpx #ddd;
	}

	.item_left_div {
		display: flex;
		flex-direction: column;
		width: 100%;
		/* background: red; */
	}

	.tag_1 {
		font-size: 20rpx;
		color: #AC731D;
		background: #FEF9C3;
		width: 90rpx;
		text-align: center;
	}

	.tag_2 {
		font-size: 20rpx;
		color: #298C4E;
		background: #DCFCE7;
		width: 90rpx;
		text-align: center;
	}

	.tag_3 {
		font-size: 20rpx;
		color: #C23636;
		background: #FEE2E2;
		width: 90rpx;
		text-align: center;
	}

	.op_btn_div {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin: 24rpx 0 6rpx 0;
	}

	.op_btn_1 {
		width: 118rpx;
		line-height: 54rpx;
		text-align: center;
		border: solid 1rpx green;
		border-radius: 12rpx;
		margin: 0 0 0 16rpx;
	}

	.op_btn_2 {
		width: 118rpx;
		line-height: 54rpx;
		text-align: center;
		border: solid 1rpx orange;
		border-radius: 12rpx;
		margin: 0 0 0 16rpx;
	}

	.op_btn_3 {
		width: 118rpx;
		line-height: 54rpx;
		text-align: center;
		border: solid 1rpx deepskyblue;
		border-radius: 12rpx;
		margin: 0 0 0 16rpx;
	}

	.btn_ok {
		height: 88rpx;
		line-height: 88rpx;
		color: white;
		text-align: center;
		font-size: 30rpx;
		margin: 60rpx 0 0 0;
		border-radius: 888rpx;
		background: #6974DD;
	}
</style>